<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="referrer" content="no-referrer" />
        <meta name="viewport" content="width=device-width, initial-scale=1,
            maximum-scale=1,
            minimum-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="./assest/style/reset.css">
        <link rel="stylesheet" href="./assest/style/font/iconfont.css">
        <link rel="stylesheet" href="./assest/style/common.css">
        <link rel="stylesheet" href="./assest/style/love.css">
        <title>收藏</title>
    </head>

    <body>
        <ul id="my-love" class="list my-love">
            <li class="item pl-10 pr-10 bg-fff flex jc-sb
                aic">
                <img src="https://img.villaday.com/images/house_392/88870280/88870280-10-14757134.jpg" alt="">
                <div class="t-box fg1 ml-15 f14 pt-15 fdc jc-c">
                    <p class="bold lh15">大鹏古城·​千语居7房客栈</p>
                    <p class="mt-10">
                        <span>¥3288 </span>
                        <span class="f888 ml-5">人均:219</span>
                    </p>
                </div>
            </li>
            <li class="item pl-10 pr-10 bg-fff flex jc-sb
                aic">
                <img src="https://img.villaday.com/images/house_392/88870280/88870280-10-14757134.jpg" alt="">
                <div class="t-box fg1 ml-15 f14 pt-15 fdc jc-c">
                    <p class="bold lh15">大鹏古城·​千语居7房客栈</p>
                    <p class="mt-10">
                        <span>¥3288 </span>
                        <span class="f888 ml-5">人均:219</span>
                    </p>
                </div>
            </li>
            <li class="fcc f888" style="height: 50px;">没有更多数据了</li>
        </ul>

        <script src="./js/axios.js"></script>
        <script src="./js/jQuery.js"></script>
        <script>
            var Like = {
                getList() {
                    var url = 'http://localhost:3000/love';
                    axios.get(url).then(function(res) {
                        Like.render(res.data);
                    })
                },

                render(list) {
                    var htmlStr = '';
                    list.forEach(function(item) {
                        htmlStr += ` <li class="item pl-10 pr-10 bg-fff flex jc-sb
                            aic">
                            <img src="${item.imageUrl}" alt="">
                            <div class="t-box fg1 ml-15 f14 pt-15 fdc jc-c">
                                <p class="bold lh15">大鹏古城·​千语居7房客栈</p>
                                <p class="mt-10">
                                    <span>¥3288 </span>
                                    <span class="f888 ml-5">人均:219</span>
                                </p>
                            </div>
                        </li>`;
                    })

                    $('#my-love').html(htmlStr);

                }
            }

            Like.getList();

        </script>
    </body>
</html>